import React from "react"
import queryString from "query-string"
import {getGdDetail} from "../../api/index"
import gddetail from "./css/gdDetail.module.css"

class gdDetail extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            contanier:[],
            songsList:[],
            creator:[]
        }
        
    }
    componentDidMount(){
        let qr = queryString.parse(this.props.location.search)
        getGdDetail(qr.id)
        .then(body=>body.json())
        .then(res=>{
            this.setState({
                contanier:res.playlist,
                songsList:res.playlist.tracks,
                creator:res.playlist.creator
            })
            console.log(this.state.contanier)
            console.log(this.state.songsList)
            console.log(this.state.creator)
        })
    }
    handleBack(){
        // console.log('11')
        this.props.history.goBack()
    }
    render(){
        return (
            <div>
                <div className={gddetail.header}>
                        <div className={gddetail.back} onClick={this.handleBack.bind(this)}>
                            <svg t="1573891662627" className={gddetail.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9822" width="30" height="30"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" fill="#666666" p-id="9823"></path></svg>
                        </div>
                        <div>
                            <h1>歌单</h1>
                        </div>
                        <div className={gddetail.bofang}>
                        <svg t="1573806248923" className={gddetail.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7780" width="40" height="40"><path d="M896 960c-23.6 0-42.7-19.1-42.7-42.7v-512c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v512c0 23.6-19.1 42.7-42.7 42.7z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V490.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v426.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V106.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v810.7c0 23.5-19.1 42.6-42.7 42.6z m-256 0c-23.6 0-42.7-19.1-42.7-42.7V618.7c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v298.7c0 23.5-19.1 42.6-42.7 42.6z" fill="#333333" p-id="7781"></path></svg>
                        </div>
                </div>
                <div className={gddetail.gdMian}>
                    <div className={gddetail.gdPic}>
                    <img src={this.state.contanier.coverImgUrl} />
                    </div>
                    <div className={gddetail.disc}>
                            <h2>{this.state.contanier.name}</h2>
                            <div className={gddetail.creator}>
                                <img src={this.state.creator.avatarUrl}/>
                                <p>{this.state.creator.nickname}</p>
                                <div className={gddetail.jiantou}>
                                    {/* <svg t="1574048439493" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10529" width="200" height="200"><path d="M422.28038263951584 354.43912567738465l27.674304223235247-28.645867253263013 193.72062124434203 192.74954989600968-193.72062124434203 192.74954989600968-27.674304223235247-28.645867253263013 163.13310297610963-164.10417432444203z" fill="#8a8a8a" p-id="10530"></path></svg> */}
                                </div>
                            </div>
                            <div className={gddetail.biaoqian}>
                                <p>{this.state.contanier.description}</p>
                                <div className={gddetail.jiantou}>
                                    {/* <svg t="1574048439493" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10529" width="200" height="200"><path d="M422.28038263951584 354.43912567738465l27.674304223235247-28.645867253263013 193.72062124434203 192.74954989600968-193.72062124434203 192.74954989600968-27.674304223235247-28.645867253263013 163.13310297610963-164.10417432444203z" fill="#8a8a8a" p-id="10530"></path></svg> */}
                                </div>
                            </div>
                    </div>
                </div>
                <div className={gddetail.gdList}>
                        <div className={gddetail.list_header}>
                            <div className={gddetail.runAll}>
                                <div className={gddetail.bfBtn}>
                                <svg t="1574063718023" className={gddetail.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11250" width="30" height="30"><path d="M473.708905 360.291786c-5.807263-4.889357-14.679327-0.76134-14.679327 6.829546l0 289.757337c0 7.590885 8.871041 11.718903 14.679327 6.829546l172.08531-144.877645c4.238534-3.568269 4.238534-10.092869 0-13.660114L473.708905 360.291786z" p-id="11251"></path><path d="M512 129.10645c-211.466226 0-382.89355 171.427324-382.89355 382.89355 0 211.466226 171.427324 382.89355 382.89355 382.89355s382.89355-171.428348 382.89355-382.89355C894.89355 300.532751 723.466226 129.10645 512 129.10645zM512 840.194764c-181.257204 0-328.194764-146.93756-328.194764-328.194764s146.93756-328.194764 328.194764-328.194764 328.194764 146.93756 328.194764 328.194764S693.25618 840.194764 512 840.194764z" p-id="11252"></path></svg>
                                </div>
                                <div className={gddetail.quanbu}>
                                    <h2>播放全部</h2><p>(共{this.state.songsList.length}首)</p>
                                </div>
                                <div className={gddetail.shoucang}>
                                    <button>+收藏({this.state.contanier.subscribedCount})</button>
                                </div>
                            </div>
                        </div>
                        <div >
                        {this.state.songsList.map((item,index)=><div className={gddetail.list} key={index}>
                            <p>{index+1}</p>
                            <div className={gddetail.song}>
                                <h3>{item.name}</h3>
                                <h5>{item.ar[0].name+"-"+item.al.name}</h5>
                            </div>
                        </div>)}
                        </div>
                </div>
            </div>
        )
    }
}

export default gdDetail